<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>自定义地图输出控件</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/plugins/ol.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/plugins/jquery.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/fileSave.js" charset="utf-8"></script>
    <style>
        .share {
            position: absolute;
            top: 10px;
            right: 10px;
            border: 1px;
            border-color: #333;
            background-color: #339999;
            color: #fff;
            box-shadow: 0px 0px 2px #666;
            cursor: pointer;
            padding: 0 4px 0 4px;
        }
    </style>
</head>

<body>
<div id="map" style="width: 100%"></div>
<script type="text/javascript">
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        view: new ol.View({
            center: ol.proj.transform(
                [120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),
            zoom: 10
        })
    });

    // 在viewport节点下添加一个分享按钮
    var viewport = map.getViewport();
    $(viewport).append('<div id="share" class="share">地图输出</div>');

    // 监听按钮点击事件，执行相关操作
    document.getElementById('share').onclick = function() {
        map.once('postcompose', function (event) {
            var canvas = event.context.canvas;
            canvas.toBlob(function (blob) {
                saveAs(blob, 'map.png');
            });
        });
        map.renderSync();
    }
</script>
</body>

</html>




